<template>
  <div>
    <article class="main-breadcrumb">
      <el-breadcrumb separator="/" class="main-breadcrumb-wrap">
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home">人员定位</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <span class="main-breadcrumb-home">电子围栏区域</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </article>
    <div class="nx-content">
      <div class="flex-bet">
        <div class="left-title flex"></div>
        <el-form ref="searchForm" :inline="true" :model="searchForm" class="demo-form-inline">

          <el-form-item label="">
            <el-button-group>
              <!-- <el-button :class="{ active: drawType == 'polygon' }" @click="drawPolygon()">开始绘制</el-button> -->
              <el-button @click="
                  zonelog();
                  handleShow();
                ">绑定弹窗摄像机</el-button>
              <el-button @click="clearCanvas">还原地图</el-button>
            </el-button-group>
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="primary" @click="saveSet">保存</el-button>
          </el-form-item> -->
        </el-form>
      </div>
      <div class="content" id="content">
        <canvas id="canvas" :width="width" :height="height"></canvas>
        <!-- <div class="area-box" v-for="(item, index) in areaDots" :key="'A' + index" :style="{ position: 'absolute', bottom: item.areaLocation.y + '%', left: item.areaLocation.x + '%' }">
          <el-select v-model="areaDots[index].type" placeholder="请选择区域类型" clearable :disabled="seeType" size="small">
            <el-option label="离岗区域" value="0"></el-option>
            <el-option label="危险区域" value="1"></el-option>
          </el-select>
          <el-select v-model="areaDots[index].isAlarm" placeholder="请选择是否开启报警" clearable :disabled="seeType">
            <el-option label="不开启" value="0"></el-option>
            <el-option label="开启" value="1"></el-option>
          </el-select>
        </div> -->
        <div v-show="dots !== []" class="point" v-for="(item, index) in dots" :key="'B' + index" :style="{ position: 'absolute', top: item.coordinate.y + 'px', left: item.coordinate.x + 'px' }" @click="handlerTipShow(index)">
          <div class="tip" v-show="dots[index].tipShow">
            <div class="tip_input">
              <img class="delImg" @click="cancel" src="../../../assets/del.png" alt="">
              <el-select v-model="dots[index].videoId" placeholder="请选择摄像机" clearable :disabled="seeType" size="small">
                <el-option v-for="item in monitorArray" :key="item.id" :label="item.videoName" :value="item.id"></el-option>
              </el-select>
              <div style="display:flex;justify-content: space-around;margin-top:10px">

                <el-button class="input_" @click="saveSet">确认</el-button>
                <el-button class="input_" @click="delSet">删除</el-button>
              </div>

            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getLocationMapSetVideoList, getLocationMaps, saveLocationMapSetVideo, delLocationMapSetVideo } from '@/api/personLocation'
import { getSchoolInfos } from '@/api/school'
import { getVideoMonitors } from '@/api/video'

export default {
  components: {},
  data() {
    return {
      // 查询字段
      searchForm: {
        mapId: '',
        mapSetId: '',
        examinationRoomId: ''
      },
      // 表格字段
      tableCols: [
        {
          label: '绘制区域',
          prop: 'name',
          align: 'center'
        },
        {
          label: '区域类型',
          slot: 'type',
          align: 'center'
        },
        {
          label: '是否开启报警',
          slot: 'isAlarm',
          align: 'center'
        }
      ],

      oldDots: [], //
      setJsonDots: [], //
      videoIdArray: [], //摄像头
      mapImage: '', // 标注图片
      locationMapSetVideoList: [],
      locationMapSets: [], //	定位地图标记
      addEditIsDialog_c: false, // 弹窗是否显示
      seeType: false, // 是否禁用
      monitorArray: [], // 摄像头集合
      addEditIsDialog: false, // 添加编辑页面状态
      addEditStatus: 'add',
      addEditId: '', // 添加编辑rowid
      schoolArray: [], // 考场集合
      mapArray: [], // 地图集合
      width: '',
      height: '',
      rect: [],
      canvas: {},
      showMenu: false,
      x: '',
      y: '',
      canvasObjects: [],
      dots: [], // 摄像头点位
      areaDots: [], // 区域
      imgClientWidth: 0, // 图片宽度
      imgClientHeight: 0, // 图片高度
      tipShow: true,

      activeIndex: -1,
      mouseFrom: {},
      mouseTo: {},
      drawType: null, //当前绘制图像的种类
      canvasObjectIndex: 0,
      textbox: null,
      rectangleLabel: 'warning',
      drawWidth: 2, //笔触宽度
      color: '#E34F51', //画笔颜色
      drawingObject: null, //当前绘制对象
      moveCount: 1, //绘制移动计数器
      doDrawing: false, // 绘制状态

      //polygon 相关参数
      polygonMode: false,
      pointArray: [],
      lineArray: [],
      activeShape: false,
      activeLine: '',
      line: {},
      xyShow: false,

      tipShowindex: ''
    }
  },
  mounted() {
    this.mapImage = this.$route.query.image
    this.setJsonDots = JSON.parse(this.$route.query.setJsonString)
    // this.dots = this.$route.query.setJsonString
    this.searchForm.mapId = this.$route.query.mapId
    this.searchForm.mapSetId = this.$route.query.id
    this.searchForm.examinationRoomId = this.$route.query.examinationRoomId
    // 获取考场列表
    this.getLocationMaps()
    this.loadBacImg()
    this.getVideoMonitors()
    setTimeout(() => {
      this.getList()
    }, 1000)
  },
  watch: {
    drawType() {
      this.canvas.selection = !this.drawType
    },
    width() {
      this.canvas.setWidth(this.width)
    },
    height() {
      this.canvas.setHeight(this.height)
    }
  },
  methods: {
    cancel() {
      setTimeout(() => {
        this.dots[this.tipShowindex].tipShow = false
        this.$forceUpdate()
      }, 100)
    },

    // 查询
    onSubmit() {
      this.getList()
    },

    // 查询列表
    getList() {
      getLocationMapSetVideoList(this.searchForm).then((res) => {
        if (res.code == 200) {
          if (this.mapImage == '') {
            this.$message({
              type: 'error',
              message: '没有选择地图资源不能进行操作!'
            })
          } else {
            res.data.forEach((item) => {
              item.coordinate = JSON.parse(item.coordinate)
              item.coordinate.x = (item.coordinate.x / 100) * this.width
              item.coordinate.y = this.height - (item.coordinate.y / 100) * this.height
              console.log(this.width)
              console.log((item.coordinate.x / 100) * this.width)
            })
            this.dots = res.data
            this.$nextTick(() => {
              this.loadBacImg()
            })
          }
        }
      })
    },
    // 获取背景图

    // 获取摄像机列表
    getVideoMonitors() {
      getVideoMonitors({ id: this.searchForm.examinationRoomId }).then((res) => {
        if (res.code == 200) {
          this.monitorArray = res.data
        }
      })
    },

    // 考场下拉切换
    schoolChange() {
      this.searchForm.mapId = ''
      this.mapArray = []

      // 还原地图
      this.clearCanvas()
      // 获取角色列表
      this.getLocationMaps()
    },
    // 获取地图列表
    getLocationMaps() {
      getLocationMaps({ id: this.searchForm.examinationRoomId }).then((res) => {
        if (res.code == 200) {
          if (res.data.length > 0) {
            // this.searchForm.mapId = res.data[0].id
            this.mapImage = res.data[0].mapImage
            this.mapArray = res.data
          }
        }
      })
    },

    // 区域
    zonelog() {
      this.getJson()
    },
    delSet() {
      delLocationMapSetVideo({ id: this.dots[this.tipShowindex].id }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: res.msg
          })
          setTimeout(() => {
            this.dots[this.tipShowindex].tipShow = false
            this.getList()
          }, 300)
        }
      })
    },
    // 提交
    saveSet() {
      // this.getJson()
      console.log(this.dots[this.tipShowindex])
      this.dots[this.tipShowindex].coordinate.x = (this.dots[this.tipShowindex].coordinate.x / this.width) * 100
      this.dots[this.tipShowindex].coordinate.y = ((this.height - this.dots[this.tipShowindex].coordinate.y) / this.height) * 100
      let form = {
        coordinate: JSON.stringify(this.dots[this.tipShowindex].coordinate),
        videoId: this.dots[this.tipShowindex].videoId,
        mapId: this.searchForm.mapId,
        mapSetId: this.searchForm.mapSetId,
        id: this.dots[this.tipShowindex].id
      }
      console.log(form)
      saveLocationMapSetVideo(form).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: res.msg
          })
          setTimeout(() => {
            this.dots[this.tipShowindex].tipShow = false
            this.getList()
          }, 300)
        }
      })
      // batchSaveLocationMapSet({
      //   mapId: this.searchForm.mapId,
      //   locationMapSets: this.locationMapSets
      // }).then((res) => {
      //   if (res.code == 200) {
      //     this.$message({
      //       type: 'success',
      //       message: res.msg
      //     })
      //   }
      // })
      this.isShow = false
    },
    //渲染背景图片至canvas
    loadBacImg() {
      let img = `${this.mapImage}`
      var imgObj = new Image()
      imgObj.src = img
      let that = this
      imgObj.onload = function () {
        that.imgClientWidth = imgObj.width
        that.imgClientHeight = imgObj.height
        setTimeout(() => {
          that.canvas.setBackgroundImage(img, that.canvas.renderAll.bind(that.canvas), {
            scaleX: that.width / imgObj.width, //计算出图片要拉伸的宽度
            scaleY: that.height / imgObj.height //计算出图片要拉伸的高度
          })
        }, 100)

        that.init()
        that.getDots()
      }
    },
    getDots() {
      this.oldDots.forEach((val) => {
        this.dots.push({
          coordinate: { x: (val.coordinate.x / 100) * this.width, y: this.height - (val.coordinate.y / 100) * this.height },
          videoId: val.videoId
        })
      })
    },
    // 定位tip
    handlerTipShow(index) {
      this.$forceUpdate()
      this.dots[index].tipShow = true
      this.tipShowindex = index
    },
    // 初始化
    init() {
      this.canvas = new fabric.Canvas('canvas', {
        skipTargetFind: false, //当为真时，跳过目标检测。目标检测将返回始终未定义。点击选择将无效
        selectable: false, //为false时，不能选择对象进行修改
        // selection: false   // 是否可以多个对象为一组
        fireRightClick: true, // 启用右键，button的数字为3
        stopContextMenu: true // 禁止默认右键菜单
      })
      const boxDOM = document.getElementById('content')
      this.width = boxDOM.offsetWidth
      this.height = boxDOM.offsetWidth / (this.imgClientWidth / this.imgClientHeight)
      this.canvas.setWidth(this.width)
      this.canvas.setHeight(this.height)
      this.canvas.renderAll()

      this.canvas.selectionColor = 'rgba(0,0,0,0.05)'
      this.canvas.on('mouse:down', this.mousedown)
      this.canvas.on('mouse:move', this.mousemove)
      this.canvas.on('mouse:up', this.mouseup)

      document.onkeydown = (e) => {
        // 键盘 delect删除所选元素
        if (e.keyCode == 46) {
          this.deleteObj()
        }
        // ctrl+z 删除最近添加的元素
        if (e.keyCode == 90 && e.ctrlKey) {
          this.canvas.remove(this.canvas.getObjects()[this.canvas.getObjects().length - 1])
        }
      }

      this.getP()
    },
    // 初始化区域
    getP() {
      let points = []
      console.log(this.setJsonDots)
      this.setJsonDots.map((item) => {
        ;(item.x = Number(item.x)), (item.y = Number(item.y))

        let a = { x: (item.x / 100) * this.width, y: this.height - (item.y / 100) * this.height }
        points.push(a)
      })
      // let points = [
      //   { x: 561, y: 105.70677158832056 },
      //   { x: 478, y: 216.62861876164837 },
      //   { x: 734, y: 187.64903706771588 }
      // ]
      this.canvas.remove(this.activeShape).remove(this.activeLine)
      var polygon = new fabric.Polygon(points, {
        stroke: this.color,
        strokeWidth: this.drawWidth,
        fill: 'rgba(43,100,206,0.6)',
        opacity: 1,
        hasBorders: false,
        hasControls: false,
        lockMovementX: true,
        lockMovementY: true,
        evented: false
      })
      this.canvas.add(polygon)

      this.activeLine = null
      this.activeShape = null
      this.polygonMode = false
      this.doDrawing = false
      this.drawType = null
    },
    // 开始绘制时，指定绘画种类
    drawTypeChange(e) {
      this.drawType = e
      this.canvas.skipTargetFind = !!e
      if (e == 'pen') {
        // isDrawingMode为true 才可以自由绘画
        this.canvas.isDrawingMode = true
      } else {
        this.canvas.isDrawingMode = false
      }
    },
    // 摄像头
    handleShow() {
      this.isShow = true
    },
    // 鼠标按下时触发
    mousedown(e) {
      // 记录鼠标按下时的坐标
      var xy = e.pointer || this.transformMouse(e.e.offsetX, e.e.offsetY)
      if (this.isShow) {
        let dots = []
        console.log((xy.x / this.width) * 100)
        dots.push({
          coordinate: xy
        })
        let items = this.canvas.getObjects()
        items.forEach((item) => {
          let areaLocation = []
          item.points.forEach((val) => {
            areaLocation.push(val)
          })
          for (let i = 0; i < dots.length; i++) {
            let boxFlag = this.isRegion(dots[i].coordinate.x, dots[i].coordinate.y, areaLocation)
            if (boxFlag) {
              this.dots.push({
                coordinate: { x: dots[i].coordinate.x, y: dots[i].coordinate.y },
                videoId: '',
                tipShow: true
              })
              this.tipShowindex = this.dots.length - 1
            }
          }
        })
      }
      this.mouseFrom.x = xy.x
      this.mouseFrom.y = xy.y
      this.doDrawing = true
      // 绘制多边形
      if (this.drawType == 'polygon') {
        this.canvas.skipTargetFind = false
        try {
          // 此段为判断是否闭合多边形，点击红点时闭合多边形
          if (this.pointArray.length > 1) {
            // e.target.id == this.pointArray[0].id 表示点击了初始红点
            if (e.target && e.target.id == this.pointArray[0].id) {
              this.generatePolygon()
            }
          }
          //未点击红点则继续作画
          if (this.polygonMode) {
            this.addPoint(e)
          }
        } catch (error) {
          console.log(error)
        }
      }
    },
    // 鼠标松开执行
    mouseup(e) {
      var xy = e.pointer || this.transformMouse(e.e.offsetX, e.e.offsetY)
      this.mouseTo.x = xy.x
      this.mouseTo.y = xy.y
      this.drawingObject = null
      this.moveCount = 1
      if (this.drawType != 'polygon') {
        this.doDrawing = false
      }
    },

    //鼠标移动过程中已经完成了绘制
    mousemove(e) {
      if (this.moveCount % 2 && !this.doDrawing) {
        //减少绘制频率
        return
      }
      this.moveCount++
      var xy = e.pointer || this.transformMouse(e.e.offsetX, e.e.offsetY)
      this.mouseTo.x = xy.x
      this.mouseTo.y = xy.y
      // 多边形与文字框特殊处理
      if (this.drawType != 'text' || this.drawType != 'polygon') {
        this.drawing(e)
      }
      if (this.drawType == 'polygon') {
        if (this.activeLine && this.activeLine.class == 'line') {
          var pointer = this.canvas.getPointer(e.e)
          this.activeLine.set({ x2: pointer.x, y2: pointer.y })

          var points = this.activeShape.get('points')
          points[this.pointArray.length] = {
            x: pointer.x,
            y: pointer.y,
            zIndex: 1
          }
          this.activeShape.set({
            points: points
          })
          this.canvas.renderAll()
        }
        this.canvas.renderAll()
      }
    },
    deleteObj() {
      this.canvas.getActiveObjects().map((item) => {
        this.canvas.remove(item)
      })
    },
    transformMouse(mouseX, mouseY) {
      return { x: mouseX / 1, y: mouseY / 1 }
    },
    // 绘制多边形开始，绘制多边形和其他图形不一样，需要单独处理
    drawPolygon() {
      this.drawType = 'polygon'
      this.polygonMode = true
      this.isShow = false
      //这里画的多边形，由顶点与线组成
      this.pointArray = new Array() // 顶点集合
      this.lineArray = new Array() //线集合
      this.canvas.isDrawingMode = false
    },
    addPoint(e) {
      var random = Math.floor(Math.random() * 10000)
      var id = new Date().getTime() + random
      var circle = new fabric.Circle({
        radius: 5,
        fill: '#ffffff',
        stroke: '#333333',
        strokeWidth: 0.5,
        left: (e.pointer.x || e.e.layerX) / this.canvas.getZoom(),
        top: (e.pointer.y || e.e.layerY) / this.canvas.getZoom(),
        selectable: false,
        hasBorders: false,
        hasControls: false,
        originX: 'center',
        originY: 'center',
        id: id,
        objectCaching: false
      })
      if (this.pointArray.length == 0) {
        circle.set({
          fill: 'red'
        })
      }
      var points = [(e.pointer.x || e.e.layerX) / this.canvas.getZoom(), (e.pointer.y || e.e.layerY) / this.canvas.getZoom(), (e.pointer.x || e.e.layerX) / this.canvas.getZoom(), (e.pointer.y || e.e.layerY) / this.canvas.getZoom()]

      this.line = new fabric.Line(points, {
        strokeWidth: 2,
        fill: '#999999',
        stroke: '#1fe4b5',
        class: 'line',
        originX: 'center',
        originY: 'center',
        selectable: false,
        hasBorders: false,
        hasControls: false,
        evented: false,

        objectCaching: false
      })
      if (this.activeShape) {
        var pos = this.canvas.getPointer(e.e)
        var points = this.activeShape.get('points')
        points.push({
          x: pos.x,
          y: this.height - pos.y
        })
        var polygon = new fabric.Polygon(points, {
          stroke: '#1fe4b5',
          strokeWidth: 1,
          fill: '#cccccc',
          opacity: 0.3,
          originX: 'bottom',

          selectable: false,
          hasBorders: false,
          hasControls: false,
          lockMovementX: true,
          lockMovementY: true,
          evented: false,
          objectCaching: false
        })

        this.canvas.remove(this.activeShape)
        this.canvas.add(polygon)
        this.activeShape = polygon
        this.canvas.renderAll()
      } else {
        var polyPoint = [
          {
            x: (e.pointer.x || e.e.layerX) / this.canvas.getZoom(),
            y: (e.pointer.y || e.e.layerY) / this.canvas.getZoom()
          }
        ]
        var polygon = new fabric.Polygon(polyPoint, {
          stroke: '#1fe4b5',
          strokeWidth: 1,
          fill: 'rgba(43,100,206,0.6)',
          opacity: 0.3,

          selectable: false,
          hasBorders: false,
          hasControls: false,
          lockMovementX: true,
          lockMovementY: true,
          evented: false,
          objectCaching: false
        })
        this.activeShape = polygon
        this.canvas.add(polygon)
      }
      this.activeLine = this.line

      this.pointArray.push(circle)
      this.lineArray.push(this.line)
      this.canvas.add(this.line)
      this.canvas.add(circle)
    },
    generatePolygon() {
      var points = new Array()
      this.pointArray.map((point, index) => {
        points.push({
          x: point.left,
          y: point.top
        })
        this.canvas.remove(point)
      })
      this.lineArray.map((line, index) => {
        this.canvas.remove(line)
      })
      this.canvas.remove(this.activeShape).remove(this.activeLine)
      var polygon = new fabric.Polygon(points, {
        stroke: this.color,
        strokeWidth: this.drawWidth,
        fill: 'rgba(43,100,206,0.6)',
        opacity: 1,
        hasBorders: false,
        hasControls: false,
        lockMovementX: true,
        lockMovementY: true,
        evented: false
      })
      this.canvas.add(polygon)

      this.activeLine = null
      this.activeShape = null
      this.polygonMode = false
      this.doDrawing = false
      this.drawType = null
    },
    drawing(e) {
      if (this.drawingObject) {
        this.canvas.remove(this.drawingObject)
      }
      var canvasObject = null
      var left = this.mouseFrom.x,
        top = this.mouseFrom.y,
        mouseFrom = this.mouseFrom,
        mouseTo = this.mouseTo
      switch (this.drawType) {
        case 'ellipse': //椭圆
          // 按shift时画正圆，只有在鼠标移动时才执行这个，所以按了shift但是没有拖动鼠标将不会画圆
          if (e.e.shiftKey) {
            mouseTo.x - left > mouseTo.y - top ? (mouseTo.y = top + mouseTo.x - left) : (mouseTo.x = left + mouseTo.y - top)
          }
          var radius = Math.sqrt((mouseTo.x - left) * (mouseTo.x - left) + (mouseTo.y - top) * (mouseTo.y - top)) / 2
          canvasObject = new fabric.Ellipse({
            left: (mouseTo.x - left) / 2 + left,
            top: (mouseTo.y - top) / 2 + top,
            stroke: this.color,
            fill: 'rgba(255, 255, 255, 0)',
            originX: 'center',
            originY: 'center',
            rx: Math.abs(left - mouseTo.x) / 2,
            ry: Math.abs(top - mouseTo.y) / 2,
            strokeWidth: this.drawWidth
          })
          break
        case 'rectangle': //长方形
          // 按shift时画正方型
          if (e.e.shiftKey) {
            mouseTo.x - left > mouseTo.y - top ? (mouseTo.y = top + mouseTo.x - left) : (mouseTo.x = left + mouseTo.y - top)
          }
          var path = 'M ' + mouseFrom.x + ' ' + mouseFrom.y + ' L ' + mouseTo.x + ' ' + mouseFrom.y + ' L ' + mouseTo.x + ' ' + mouseTo.y + ' L ' + mouseFrom.x + ' ' + mouseTo.y + ' L ' + mouseFrom.x + ' ' + mouseFrom.y + ' z'
          canvasObject = new fabric.Path(path, {
            left: left,
            top: top,
            stroke: this.color,
            strokeWidth: this.drawWidth,
            fill: 'rgba(255, 255, 255, 0)',
            hasControls: false
          })
          //也可以使用fabric.Rect
          break

        default:
          break
      }

      if (canvasObject) {
        // canvasObject.index = getCanvasObjectIndex();\
        this.canvas.add(canvasObject) //.setActiveObject(canvasObject)
        this.drawingObject = canvasObject
      }
    },
    // 获取图形坐标
    getJson() {
      let items = this.canvas.getObjects()
      this.locationMapSets = []
      items.forEach((item, index) => {
        let itemcoord = []
        let areaLocation = []
        item.points.forEach((val) => {
          areaLocation.push(val)
          itemcoord.push({ x: (val.x / this.width) * 100, y: ((this.height - val.y) / this.height) * 100 })
        })
        console.log(this.dots)
        const locationMapSetVideoList = []
        for (let i = 0; i < this.dots.length; i++) {
          let boxFlag = this.isRegion(this.dots[i].coordinate.x, this.dots[i].coordinate.y, areaLocation)
          if (boxFlag) {
            console.log(this.dots[i].coordinate.x)
            let coordinate = { x: (this.dots[i].coordinate.x / this.width) * 100, y: ((this.height - this.dots[i].coordinate.y) / this.height) * 100 }
            locationMapSetVideoList.push({
              coordinate: JSON.stringify(coordinate),
              videoId: this.dots[i].videoId
            })
          }
        }
        this.areaDots.push({
          areaLocation: itemcoord[2],
          isAlarm: '',
          type: ''
        })

        if (JSON.stringify(areaLocation) !== '') {
          this.locationMapSets.push({
            id: index,
            name: '区域' + (index + 1),
            setJsonString: JSON.stringify(itemcoord),
            locationMapSetVideoList: locationMapSetVideoList
          })
        }
      })
      // 过滤重复数据
      this.areaDots = this.areaDots.reduce(function (tempArr, item) {
        if (tempArr.findIndex((ele) => ele.areaLocation.x === item.areaLocation.x) === -1) {
          tempArr.push(item)
        }
        return tempArr
      }, [])
      // 添加过滤后的属性数据
      this.locationMapSets = this.locationMapSets.map((item, index) => {
        return {
          ...item,
          isAlarm: this.areaDots[index].isAlarm,
          type: this.areaDots[index].type
        }
      })
    },
    // 验证摄像机点位是否在区域内
    isRegion(lon, lat, aPoints) {
      let num = 0,
        iCount
      let dLon1, dLon2, dLat1, dLat2, dLon
      if (aPoints.length < 3) return false
      iCount = aPoints.length
      for (let i = 0; i < iCount; i++) {
        if (i == iCount - 1) {
          dLon1 = aPoints[i].x
          dLat1 = aPoints[i].y
          dLon2 = aPoints[0].x
          dLat2 = aPoints[0].y
        } else {
          dLon1 = aPoints[i].x
          dLat1 = aPoints[i].y
          dLon2 = aPoints[i + 1].x
          dLat2 = aPoints[i + 1].y
        }
        if ((lat >= dLat1 && lat < dLat2) || (lat >= dLat2 && lat < dLat1)) {
          if (Math.abs(dLat1 - dLat2) > 0) {
            dLon = dLon1 - ((dLon1 - dLon2) * (dLat1 - lat)) / (dLat1 - dLat2)
            if (dLon < lon) num++
          }
        }
      }
      if (num % 2 != 0) return true
      return false
    },
    // 还原
    clearCanvas() {
      ;(this.isShow = false), (this.mouseFrom = {}), (this.mouseTo = {}), (this.drawType = null), (this.canvasObjectIndex = 0), (this.rectangleLabel = 'warning'), (this.drawWidth = 2), (this.color = '#E34F51'), (this.drawingObject = null), (this.moveCount = 1), (this.doDrawing = false), (this.polygonMode = false), (this.pointArray = []), (this.lineArray = []), (this.activeShape = false), (this.activeLine = ''), (this.line = {}), (this.dots = [])
      this.areaDots = []
      this.oldDots = []
      this.isShow = false
      this.canvas.dispose()
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>
.main-breadcrumb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 76px;
  border-bottom: solid 20px #f2f2f2;
  padding-left: 20px;
  .main-breadcrumb-wrap {
    font-size: 16px;
    line-height: 68px;
    .main-breadcrumb-home {
      cursor: pointer;
      color: #666666;
      font-weight: bold;
    }
    .main-breadcrumb-sp {
      color: #666666;
      font-weight: bold;
    }
  }
}
.content {
  width: 100%;
  // height: 80.19vh;
  margin: 0 auto;
  position: relative;
  .area-box {
    width: 90px;
  }
  .point {
    width: 18px;
    height: 25px;
    background: url(../../../assets/point.png) center center;
    background-size: 100% 100%;
    margin-left: -8px;
    margin-top: -20px;
    background-repeat: no-repeat;
    cursor: pointer;
    .tip {
      width: 205px;
      height: 130px;
      border-radius: 5%;
      position: absolute;
      top: -200%;
      left: 200%;
      background-color: #f1f0f0;
      box-shadow: 1em 1em 1em rgb(195, 196, 194);
      font-size: 10px;
      color: white;

      display: flex;
      flex-direction: column;

      justify-content: space-around;
      // padding: 0 0px 3px 5px;
      .tip_input {
        width: 170px;
        margin: 10px;
        margin-top: 15px;
        margin-left: 15px;
      }
      .input_ {
        margin: 5px;
        margin-bottom: 0px;
      }
      .top {
        // margin-top: 22px;
      }
    }
  }
  canvas {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
  }
}

.draw-btn-group {
  // width: 1270px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  & > div {
    background: #fafafa;
    cursor: pointer;
    &:hover {
      background: #eee;
    }
  }
  .active {
    background: #eee;
  }
}
.delImg {
  width: 13px;
  position: absolute;
  right: 6px;
  top: 7px;
}
</style>
